<script>
export default {
  name: "hotel",
  props: {
    data: {
      default: () => ({}),
    },
  },
  data() {
    return {
      star: [
        "https://wzws.wanshanlundiao.cn/upload/img/20250423/202504231653042260.png",
        "https://wzws.wanshanlundiao.cn/upload/img/20250423/202504231653262983.png",
        "https://wzws.wanshanlundiao.cn/upload/img/20250423/202504231653389458.png",
        "https://wzws.wanshanlundiao.cn/upload/img/20250423/202504231653535386.png",
        "https://wzws.wanshanlundiao.cn/upload/img/20250423/202504231654071323.png",
      ],
      starData: [
        {
          name: "经济型",
          value: "0,1,2",
        },
        {
          name: "舒适型",
          value: "3",
        },
        {
          name: "高档型",
          value: "4",
        },
        {
          name: "豪华型",
          value: "5",
        },
      ],
    };
  },
  computed: {
    tagList() {
      return this.data.Tags
        ? this.data.Tags.split(",").map((tag) => tag.trim())
        : [];
    },
    hotelStarName() {
      const star = String(this.data.HotelStars);
      const found = this.starData.find((item) =>
        item.value.split(",").includes(star)
      );
      return found ? found.name : "";
    },
  },
  methods: {
    handleClick() {
      this.$emit("click", this.data);
    },
  },
};
</script>

<template>
  <view class="shop-container" hover-class="shop-hover" @click="handleClick">
    <view class="shop-image">
      <image :src="data.ShopLogo" mode="aspectFill"></image>
      <view class="shop-tag" v-if="data.IsRecommend">{{
        $t("merchant.common.recommended")
      }}</view>
      <view v-if="data.IsBusiness == 1" class="logo">
        <image src="https://wzws.wanshanlundiao.cn/upload/img/ws_static/static/icon/jjks.png" mode="aspectFill" class="logo-img" />
      </view>
    </view>
    <view class="shop-info">
      <view class="shop-header">
        <text class="shop-name">{{ data.ShopName }}</text>
        <text class="shop-star">{{ hotelStarName }}</text>
        <!-- <image :src="star[data.HotelStars - 1]" class="hotel-star" v-if="data.HotelStars"></image> -->
        <!--        <view class="shop-rating">-->
        <!--          <text class="rating-score">{{data.Score || 4.8}}</text>-->
        <!--          <text class="rating-text">分</text>-->
        <!--        </view>-->
      </view>
      <view class="shop-h">
        <view class="shop-tags">
          <text
            class="tag"
            v-for="(tag, index) in tagList"
            :key="index"
            v-if="data.Tags"
            >{{ tag }}</text
          >
        </view>
        <view class="shop-price" v-if="data.PerConsumption">
          <text class="price-value">¥{{ data.PerConsumption }}</text>
          <text class="price-unit">{{ $t("merchant.hotel.perNight") }}</text>
        </view>
      </view>
      <view class="shop-address" v-if="data.Address">
        <text class="address-icon">{{ $t("merchant.common.address") }}：</text>
        <text class="address-text">{{ data.Address }}</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.shop-container {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(30rpx);
  animation: fadeInUp 0.5s ease forwards;
  animation-delay: calc(0.1s * var(--item-index, 0));

  &.shop-hover {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30rpx);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .shop-image {
    width: 100%;
    height: 300rpx;
    position: relative;
    flex-shrink: 0;

    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .shop-tag {
      position: absolute;
      top: 16rpx;
      left: 16rpx;
      background: linear-gradient(135deg, #ff6b6b, #ff8787);
      color: #fff;
      font-size: 22rpx;
      padding: 4rpx 12rpx;
      border-radius: 4rpx;
    }
    .logo {
      position: absolute;
      top: 0;
      right: 0;
      width: 120rpx;
      height: 120rpx;
      &-img {
        width: 100%;
        transform: rotate(90deg);
        transform-origin: center center;
      }
    }
  }

  .shop-info {
    padding: 16rpx;

    .shop-h {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8rpx;
      min-height: 34rpx;
    }

    .shop-header {
      display: flex;
      align-items: center;
      margin-bottom: 8rpx;

      .shop-name {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
        margin-right: 12rpx;
        max-width: 100%;
        word-break: break-all;
        white-space: normal;
      }
      .shop-star {
        font-size: 26rpx;
        color: #696969;
      }

      .hotel-star {
        width: 98rpx;
        height: 33rpx;
        margin-right: auto;
      }

      .shop-rating {
        display: flex;
        align-items: center;

        .rating-score {
          color: #ff6b6b;
          font-size: 26rpx;
          font-weight: 600;
          margin-right: 4rpx;
        }

        .rating-text {
          color: #ff6b6b;
          font-size: 20rpx;
        }
      }
    }

    .shop-tags {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 8rpx;
      align-items: center;
      margin-right: 20rpx;
      min-width: 0;

      .tag {
        height: 34rpx;
        font-size: 20rpx;
        color: #9b5734;
        background-color: #fff4e6;
        padding: 2rpx 8rpx;
        border-radius: 4rpx;
      }
    }

    .shop-price {
      font-size: 20rpx;
      color: #666;
      flex-shrink: 0;

      .price-value {
        font-size: 32rpx;
        font-weight: 600;
        color: #ff6b6b;
      }

      .price-unit {
        margin-left: 4rpx;
      }
    }

    .shop-address {
      display: flex;
      align-items: flex-start;
      font-size: 20rpx;
      color: #999;

      .address-icon {
        flex-shrink: 0;
        margin-right: 4rpx;
      }

      .address-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>